<template>
	<view class="page-wrap">
		<searchBar @search="toSearch"></searchBar>
		<view class="handler-ipout-block" @tap="toInputTargetPage">
			<view class="block-left">
				<text class="block-name">手机号邀请被评人</text>
				<view class="block-input input-placeholder">输入被评人手机号</view>
			</view>
			<view class="block-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>

		<view class="add-friend-way-list">
			<button class="add-friend-way-item btm-item" @tap.stop="showShareConfirmPop">
			<!-- <button class="add-friend-way-item btm-item" open-type="share"> -->
				<view class="item-left">
					<image class="item-icon" src="../../static/wxIcon2.png"></image>
					<view class="item-name">邀请被评人</view>
				</view>
				<image class="right-arrow" src="../../static/rightArrowIcon.png"></image>
			</button>
		</view>

		<!-- 朋友列表 -->
		<friendsListBlock :list="friendList" :isSearchResult="!!searchKey" @itemClk="selectFriend"></friendsListBlock>

		<!-- 右侧字母表 -->
		<letterList></letterList>

		<!-- 分享确认弹窗 -->
		<confirmPop :title="'提示'" :hasShareBtn="true" :btns="confirmPopBtns" :content="confirmPopContent"
			@maskClk="closeConfrimPop" @btnClk="confrimPopBtnClk" v-show="confirmPopShow">
		</confirmPop>

		<confirmPop :title="'提示'" :btns="confirmPopBtns2" :content="confirmPopContent2"
			@maskClk="closeConfrimPop2" @btnClk="confrimPopBtnClk2" v-show="confirmPopShow2">
		</confirmPop>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				searchKey: '',
				confirmPopShow: false,
				confirmPopContent: '被评人邀请应直接发其本人微信，不要发群里，以免点评出错。如有任何问题，请联系公众号客服。',
				confirmPopBtns: [{
					text: '继续邀请',
					type: 'confirm'
				}, {
					text: '取消',
					type: 'cancel',
					bgColor: '#E5E5E5'
				}],
				confirmPopShow2: false,
				confirmPopContent2: '是否已邀请被评人?',
				confirmPopBtns2: [{
					text: '已邀请',
					type: 'confirm'
				}, {
					text: '未邀请',
					type: 'cancel',
					bgColor: '#E5E5E5'
				}]
			}
		},
		onShow() {
			// if(!this.confirmPopShow2){
			// 	this.getVirtualId()
			// }
		},
		onLoad(){
            this.getVirtualId()
		},
		computed: {
			...mapState(['friendList', 'shareImages']),
		},
		mounted() {
			this.$store.dispatch('getFriendList')
		},
		onShareAppMessage() {
			this.confirmPopShow = false
			this.confirmPopShow2 = true
			let fileUrl = '190570665238597'
			this.shareImages.forEach(item => {
				if (item.code == 'ShareContent') {
					fileUrl = item.fileUrl
				}
			});
			return {
				title: '我正准备为你点赞', //转发页面的标题
				imageUrl: `https://friendlyapi.yuelinshe.com/api/settingservice/previewfileinfo?id=${fileUrl}`,
				path: `/pages/commentDetail/index?fromUserId=${this.$store.state.userInfo.id}&virtualId=${this.virtualId ? this.virtualId:''}` //转发页面的路径以及携带的参数

			}
		},
		methods: {
			getVirtualId(){
                this.$api.getVirtualId().then((res) => {
			    	if(res){
			    		this.virtualId = res + ''
			            this.$store.commit('updateNewEvaluate', {
				        	id: this.virtualId,
				        })
			    	}
			    })
			},
			toSearch(key) {
				this.searchKey = key
				this.$store.dispatch('getFriendList', key ? {
					keywords: key
				} : {})
			},
			toInputTargetPage() {
				uni.navigateTo({
					url: '/pages/userDetail/searchCommentTargetByPhone'
				})
			},
			selectFriend(data) {
				this.getSelcetUserInfo(data.userId)
			},
			getSelcetUserInfo(id) {
				this.$api.getUserInfoById(id).then(res => {
					this.$store.commit('updateNewEvaluate', {
						toUserInfo: res,
					})
				    uni.navigateTo({
					    url: '/pages/userDetail/addComment?delta=2'
				    })
				})
			},
			showShareConfirmPop() {
				this.confirmPopShow = true
			},
			confrimPopBtnClk() {
				this.closeConfrimPop()
			},
			closeConfrimPop() {
				this.confirmPopShow = false
			},
			confrimPopBtnClk2(res) {
				if(res.type === 'confirm'){
					this.$store.commit('setTempIdentityDesc','')
					uni.navigateTo({
						url: `/pages/userDetail/inputCommentTarget?type=1&virtualId=${this.virtualId}`
					})
				}
				// else{
				// 	this.getVirtualId()
				// }
				this.closeConfrimPop2()
			},
			closeConfrimPop2() {
				this.confirmPopShow2 = false
			}
		}
	}
</script>

<style lang="less">
	.handler-ipout-block {
		background: #FFFFFF;
		box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		width: 690rpx;
		box-sizing: border-box;
		margin: 0 auto;

		.block-left {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.block-name {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
				margin-bottom: 20rpx;
			}

			.block-input {
				font-size: 30rpx;
				font-weight: 400;
				color: #666;
				line-height: 44rpx;
				width: 500rpx;
			}

			.input-placeholder {
				color: #999;
			}
		}

		.block-right {
			min-height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.right-arrow-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.add-friend-way-list {
		margin-top: 10rpx;

		.add-friend-way-item {
			height: 100rpx;
			padding: 0 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #EEEEEE;
			margin: 0 46rpx;

			.item-left {
				display: flex;
				align-items: center;

				.item-icon {
					width: 54rpx;
					height: 54rpx;
				}

				.item-name {
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
					margin-left: 20rpx;
				}
			}

			.right-arrow {
				width: 54rpx;
				height: 54rpx;
			}

			&.btm-item {
				background-color: #fff;
				text-align: left;

				&::after {
					border: none;
				}
			}
		}
	}
</style>
